<template>
	<section v-loading="listLoading">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.content" clearable placeholder="关键词"></el-input>
				</el-form-item>
				<el-form-item label="是否上下架">
		            <el-select v-model="filters.isOnSale" clearable> 
		                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
		            </el-select>
			    </el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" v-on:click="handleCurrentChange(1)">查询</el-button>
				</el-form-item>
				<el-form-item class="fr">
				    <el-button type="primary" size="medium" plain @click="handleAdd">新增</el-button>
			    </el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" stripe highlight-current-row @selection-change="selsChange" border style="width: 100%;">
			<el-table-column prop="goodsId" label="ID" min-width="40" align="center"></el-table-column>			
			<el-table-column label="商品图片" align="center" width="80">
                <template slot-scope="scope">
            		<el-popover placement="top-start" title="" trigger="click" v-for="item in scope.row.goodsInfo.gallery"  :key="item.id">
                        <img :src="item" alt="" style="width: 500px;">
                        <img slot="reference" :src="item" style="width: 40px;height: 40px;object-fit: cover;border-radius: 5px;">
                    </el-popover>
            	</template>
            </el-table-column>
			<el-table-column prop="goodsInfo.name" label="商品名称" min-width="100" align="center"></el-table-column>
			<el-table-column prop="categoryName" label="商品分类" min-width="60" align="center"></el-table-column>
			<el-table-column prop="goodsInfo.counterPrice" label="现价" min-width="60" align="center"></el-table-column>
			<!--<el-table-column label="规格" min-width="60" align="center">
			    <template slot-scope="scope">
            		<el-button size="small" type="text"  @click="handlespec(scope.row)">规格</el-button>
            	</template>
            </el-table-column>-->
			<el-table-column prop="goodsInfo.sales" label="销售量" min-width="60" align="center"></el-table-column>
			<el-table-column prop="commentCount" label="评论数" min-width="60" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="goodsComment(scope.$index, scope.row, 'goodsComment')">{{scope.row.commentCount}}</el-button>
				</template>
			</el-table-column>
			<el-table-column label="是否新品" min-width="60" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.goodsInfo.isNew?'是' :'否'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="热门推荐" min-width="70" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.goodsInfo.isHot?'是' :'否'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="支持自提" min-width="70" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.goodsInfo.isSince?'是' :'否'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" min-width="60" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.goodsInfo.isOnSale?'上架' :'下架'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" :formatter="formatDate"  min-width="110" align="center"></el-table-column>
			<el-table-column label="操作" width="210" align="center">
				<template slot-scope="scope">
					<el-button v-if="scope.row.goodsInfo.isOnSale == false" size="mini" type="success" @click="handleToEnable(scope.row.goodsId)" >上架</el-button>
		            <el-button v-if="scope.row.goodsInfo.isOnSale == true" size="mini" type="danger" @click="handleDisabled(scope.row.goodsId)" >下架</el-button>
		            <el-button size="mini" type="warning" @click="handleAddGroup(scope.row)">去拼团</el-button><br/>
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" plain size="mini" @click="handleDel(scope.row.goodsId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" width="800px" style="margin-top: -80px;"> 
			<el-form :model="addForm" label-width="120px"  ref="addForm">
				<el-row>
					<el-col :span="24">
						<el-form-item label="商品名称" prop="name" :rules="[{ required: true, message: '请填写商品名称', trigger: 'blur' }]">
							<el-input v-model="addForm.name" size="mini"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="商品分类" prop="pNewCategoryId" :rules="[{ required: true, message: '请选择商品分类', trigger: 'blur' }]">
							<el-select v-model="addForm.pNewCategoryId" clearable size="mini"> 
								<el-option v-for="(item,index) in pcategoryList" :key="item.categoryId" :label="item.categorynNme" :value="item.categoryId" @click.native="handlecategory(index)"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="二级分类" prop="newCategoryId" :rules="[{ required: true, message: '请选择商品二级分类', trigger: 'blur' }]">
							<el-select v-model="addForm.newCategoryId" clearable size="mini"> 
								<el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categorynNme" :value="item.categoryId" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否热门推荐" prop="isHot" :rules="[{ required: true, message: '请选择是否热门推荐', trigger: 'blur' }]">
							<el-select v-model="addForm.isHot" clearable size="mini"> 
								<el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否新品" prop="isNew">
							<el-select v-model="addForm.isNew" clearable size="mini"> 
								<el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否支持自提" prop="isSince">
							<el-select v-model="addForm.isSince" clearable size="mini"> 
								<el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="原价" prop="counterPrice" :rules="[{ required: true, message: '请填写原价', trigger: 'blur' }]">
							<el-input v-model="addForm.counterPrice" size="mini" style="width:80%">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="商品详情" prop="detail">
							<quill-editor id="editor" v-model="addForm.detail" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)"  style="height:200px;"
								@focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
							<el-upload class="avatar-uploader" :http-request="uploadImage" :multiple="true" :show-file-list="false" action="" 
								:before-upload="beforeAvatarUpload" accept="image/*"></el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="规格个数" prop="specificationType">
							<el-select v-model="addForm.specificationType" clearable size="mini"> 
								<el-option v-for="item in isdangeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<div class="plantingGoodsFarm" v-if="addForm.specificationType == 1">
							<div class="plantingGoodsFarmHead">
								<span class="plantingGoodsFarmHeadSpan">规格</span>
								<el-button plain size="mini" type="success" @click="handleAddSpec">新增规格</el-button>
							</div>
							<div class="plantingGoodsFarmMain" v-for="(item,index) in specificationList">
								<div class="plantingGoodsFarmMainLeft">
									<div>规格{{index+1}}</div>
									<el-form-item label="规格名称">
										<el-input v-model="item.specificationValue" style="width: 250px;"/>
									</el-form-item>
									<el-form-item label="价格">
										<el-input v-model="item.price" type='number' style="width: 250px;"/>
									</el-form-item>
									<el-form-item label="库存">
										<el-input v-model="item.number" type='number' style="width: 250px;"/>
									</el-form-item>
									<el-form-item label="规格图片">
										<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return UploadSpec(res, index)}" :multiple="false" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="*/">
											<img v-if="item.specificationImg" :src="item.specificationImg" style="width: 90px;height: 90px;border-radius: 5px;object-fit: cover;">
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</el-form-item>
								</div>
								<el-button plain size="mini" v-if="index > 0" type="danger" @click="handleDelSpec(index)">删除规格</el-button>
							</div>
						</div>
						<div v-if="addForm.specificationType == 2">
							<el-row>
								<el-col :span="12">
									<el-form-item label="主规格名称">
										<el-input v-model="bothSpecification.specificationMainName" style="width: 250px;" size="mini"/>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="子规格名称">
										<el-input v-model="bothSpecification.specificationChildName" style="width: 250px;" size="mini"/>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="plantingGoodsFarmHead">
								<span class="plantingGoodsFarmHeadSpan">规格</span>
								<el-button plain size="mini" type="success" @click="handleAddparameterList">新增规格</el-button>
							</div>
							<div class="plantingGoodsFarmMain1" v-for="(item,index) in bothSpecification.parameterList">
								<div class="plantingGoodsFarmMain-content1">
									<div class="plantingGoodsFarmMainLeft">
										<el-row>
											<el-col :span="3">
												<el-form-item :label="'规格'+ (index + 1)">
													<!-- <div>规格{{index+1}}</div> -->
													<el-button plain size="mini" v-if="index > 0" type="danger" @click="handleDelparameterList(index)">删除规格</el-button>
												</el-form-item>
											</el-col>
											<el-col :span="7">
												<el-form-item label="主规格值">
													<el-input v-model="item.specificationValue" style="width:100%;" size="mini"/>
												</el-form-item>
											</el-col>
											<el-col :span="7">
												<el-form-item label="主规格价格">
													<el-input v-model="item.price" type='number' style="width:100%;" size="mini"/>
												</el-form-item>
											</el-col>
											<el-col :span="7">
												<el-form-item label="主规格图片">
													<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return UploadSpec1(res, index)}" 
														:multiple="false" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="*/">
														<img v-if="item.specificationImg" :src="item.specificationImg" style="width:95%;height:95%;border-radius: 5px;padding-top:5px;object-fit: cover;">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									
								</div>
								<div class="plantingGoodsFarmHead">
									<span class="plantingGoodsFarmHeadSpan">子规格</span>
									<el-button plain size="mini" type="success" @click="handleAddchildParameterList(index)">新增子规格</el-button>
								</div>
								<div class="plantingGoodsFarmMain-content" v-for="(tab,i) in item.childParameterList">
									<div class="plantingGoodsFarmMainLeft">
										<el-row>
											<el-col :span="3">												
												<el-form-item :label="'子规格'+ (i + 1)">
												</el-form-item>
											</el-col>
											<el-col :span="9">
												<el-form-item label="子规格值">
													<el-input v-model="tab.specificationValue" style="width: 100%;" size="mini"/>
												</el-form-item>
											</el-col>
											<el-col :span="9">
												<el-form-item label="子规格库存">
													<el-input v-model="tab.number" style="width: 100%;" size="mini"/>
												</el-form-item>
											</el-col>
											<el-col :span="3">
												<div style="margin:5px;">
													<el-button plain size="mini" v-if="i > 0" type="danger" @click="handleDelchildParameterList(index,i)">删除</el-button>
												</div>													
											</el-col>									
										</el-row>
									</div>
								</div>
							</div>
						</div>						
					</el-col>
					<el-col :span="24">
						<el-form-item label="商品图片">
							<div class="uploadImg">
								<div v-for="(tab,index) in this.urlList" class="uploadImgItem">
									<img :src="tab" style="width: 145px;height: 145px;border-radius: 5px;object-fit: cover;">
									<img class="uploadImgItemDel" @click="handleAddDel(index)" src="http://blyw.oss-cn-hangzhou.aliyuncs.com/webStorage/web_1619754060794173.png"/>
								</div>
								<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return Upload(res)}" :multiple="true" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="image/jpeg,image/png">
									<i class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="视频">
							<div v-if="addForm.videoUrl" class="uploadVideo">
								<video :src="addForm.videoUrl" :poster="addForm.vodPhoto" controls style="width: 360px;height: 180px;"></video>
								<img class="uploadImgItemDel" @click="handleDelUrl(0)" src="http://blyw.oss-cn-hangzhou.aliyuncs.com/webStorage/web_1619754060794173.png"/>
							</div>
							<el-upload v-if="!addForm.videoUrl" action :http-request="UploadVideo" :on-preview="handlePreview" :before-remove="beforeRemove" :on-remove="handleRemove" :on-success="handleSuccess" :on-exceed="handleExceed" drag :limit="limit" :file-list="fileList" >
								<i class="el-icon-upload" ></i>
								<div class="el-upload__text">
												将视频拖到此处，或
									<em>点击上传</em>
								</div>
								<div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
							</el-upload>
							<div v-if="addForm.videoUrl">上传文件大小不能超过 1G</div>
							<el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click.native="addFormVisible = false">取消</el-button>
				<el-button size="mini" type="primary" @click.native="addSubmit">确定</el-button>
			</div>
		</el-dialog>
		
		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" width="800px" style="margin-top: -80px;"> 
			<el-form :model="editForm" label-width="120px"  ref="editForm">
				<el-row>					
					<el-col :span="24">
						<el-form-item label="商品名称" prop="name" :rules="[{ required: true, message: '请填写商品名称', trigger: 'blur' }]">
							<el-input v-model="editForm.name" size="mini"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="商品分类" prop="pNewCategoryId" :rules="[{ required: true, message: '请选择商品分类', trigger: 'blur' }]">
							<el-select v-model="editForm.pNewCategoryId" clearable size="mini"> 
								<el-option v-for="(item,index) in pcategoryList" :key="item.categoryId" :label="item.categorynNme" :value="item.categoryId" @click.native="handlecategory(index)"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="二级分类" prop="newCategoryId" :rules="[{ required: true, message: '请选择商品二级分类', trigger: 'blur' }]">
							<el-select v-model="editForm.newCategoryId" clearable size="mini"> 
								<el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categorynNme" :value="item.categoryId" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否热门推荐" prop="isHot" :rules="[{ required: true, message: '请选择是否热门推荐', trigger: 'blur' }]">
							<el-select v-model="editForm.isHot" clearable size="mini"> 
								<el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否新品" prop="isNew" :rules="[{ required: true, message: '请选择是否新品', trigger: 'blur' }]">
							<el-select v-model="editForm.isNew" clearable size="mini"> 
								<el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否支持自提" prop="isSince">
							<el-select v-model="editForm.isSince" clearable size="mini"> 
								<el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="原价" prop="counterPrice" :rules="[{ required: true, message: '请填写原价', trigger: 'blur' }]">
							<el-input v-model="editForm.counterPrice" size="mini">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="商品详情" prop="detail">
							<quill-editor id="editor" v-model="editForm.detail" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" 
								@focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
							<el-upload class="avatar-uploader" :http-request="uploadImage" :multiple="true" :show-file-list="false" action="" 
								:before-upload="beforeAvatarUpload" accept="image/*"></el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<!--<el-form-item label="保障">
							<div class="security">
								<div class="security-item">
									<el-input v-model="editForm.security0" maxlength="10"></el-input>
								</div>
								<div class="security-item">
									<el-input v-model="editForm.security1" maxlength="10"></el-input>
								</div>
								<div>
									<el-input v-model="editForm.security2" maxlength="10"></el-input>
								</div>
							</div>
						</el-form-item>-->
						<!--<el-form-item label="规格个数" prop="specificationType">
							<el-select v-model="editForm.specificationType" clearable> 
								<el-option v-for="item in isdangeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
							</el-select>
						</el-form-item>-->
						<div class="plantingGoodsFarm" v-if="editForm.specificationType == 1">
							<div class="plantingGoodsFarmHead">
								<span class="plantingGoodsFarmHeadSpan">主规格</span>
								<el-button plain size="mini" type="success" @click="handleAddSpec">新增规格</el-button>
							</div>
							<div class="plantingGoodsFarmMain" v-for="(item,index) in specificationList">
								<div class="plantingGoodsFarmMainLeft">
									<div>规格{{index+1}}</div>
									<el-form-item label="规格名称">
										<el-input v-model="item.specificationValue" style="width: 250px;"/>
									</el-form-item>
									<el-form-item label="价格">
										<el-input v-model="item.price" type='number' style="width: 250px;"/>
									</el-form-item>
									<el-form-item label="库存">
										<el-input v-model="item.number" type='number' style="width: 250px;"/>
									</el-form-item>
									<el-form-item label="规格图片">
										<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return UploadSpec(res, index)}" :multiple="false" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="*/">
											<img v-if="item.specificationImg" :src="item.specificationImg" style="width: 145px;height: 145px;border-radius: 5px;object-fit: cover;">
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</el-form-item>
								</div>
								<el-button plain size="mini" v-if="!item.specificationId && index > 0" type="danger" @click="handleDelSpec(index)">删除规格</el-button>
								<el-button plain size="mini" v-if="item.specificationId && index > 0" type="danger" @click="handleDelSpecProductId(index,item.specificationId)">删除规格</el-button>
								
							</div>
						</div>
						<div v-if="editForm.specificationType == 2">
							<el-form-item label="主规格名称">
								<el-input v-model="bothSpecification.specificationMainName" style="width: 250px;"/>
							</el-form-item>
							<el-form-item label="子规格名称">
								<el-input v-model="bothSpecification.specificationChildName" style="width: 250px;"/>
							</el-form-item>
							<div class="plantingGoodsFarmHead">
								<span class="plantingGoodsFarmHeadSpan">规格</span>
								<el-button plain size="mini" type="success" @click="handleAddparameterList">新增规格</el-button>
							</div>
							<div class="plantingGoodsFarmMain1" v-for="(item,index) in bothSpecification.parameterList">
								<div class="plantingGoodsFarmMain-content1">
									<div class="plantingGoodsFarmMainLeft">
										<div class="zhuguige">
											<div>规格{{index+1}}</div>
											<el-button plain size="mini" v-if="!item.specificationId && index > 0" type="danger" @click="handleDelparameterList(index)">删除规格</el-button>
											<el-button plain size="mini" v-if="item.specificationId && index > 0" type="danger" @click="handleDelParameterSpecificationId(index,item.specificationId)">删除规格</el-button>
											<!--<el-button plain size="mini" v-if="index > 0" type="danger" @click="handleDelparameterList(index)">删除规格</el-button>-->
										</div>
										<el-form-item label="主规格值">
											<el-input v-model="item.specificationValue" style="width: 250px;"/>
										</el-form-item>
										<el-form-item label="主规格价格">
											<el-input v-model="item.price" type='number' style="width: 250px;"/>
										</el-form-item>
										<!--<el-form-item label="主规格库存">
											<el-input v-model="item.number" type='number' style="width: 250px;"/>
										</el-form-item>-->
										<el-form-item label="主规格图片">
											<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return UploadSpec1(res, index)}" :multiple="false" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="*/">
												<img v-if="item.specificationImg" :src="item.specificationImg" style="width: 145px;height: 145px;border-radius: 5px;object-fit: cover;">
												<i v-else class="el-icon-plus avatar-uploader-icon"></i>
											</el-upload>
										</el-form-item>
									</div>
									
								</div>
								<div class="plantingGoodsFarmHead">
									<span class="plantingGoodsFarmHeadSpan">子规格</span>
									<el-button plain size="mini" type="success" @click="handleAddchildParameterList(index)">新增子规格</el-button>
								</div>
								<div class="plantingGoodsFarmMain-content" v-for="(tab,i) in item.childParameterList">
									<div class="plantingGoodsFarmMainLeft">
										<!-- <div>子规格{{i+1}}</div>
										<el-form-item label="子规格值">
											<el-input v-model="tab.specificationValue" style="width: 250px;"/>
									</el-form-item>
									<el-form-item label="子规格库存">
											<el-input v-model="tab.number" style="width: 250px;"/>
										</el-form-item> -->
										<el-row>
											<el-col :span="3">												
												<el-form-item :label="'子规格'+ (i + 1)"></el-form-item>
											</el-col>
											<el-col :span="9">
												<el-form-item label="子规格值">
													<el-input v-model="tab.specificationValue" style="width: 100%;" size="mini"/>
												</el-form-item>
											</el-col>
											<el-col :span="9">
												<el-form-item label="子规格库存">
													<el-input v-model="tab.number" style="width: 100%;" size="mini"/>
												</el-form-item>
											</el-col>
											<el-col :span="3">
												<div style="margin:5px;">
													<!--<el-button plain size="mini" v-if="i > 0" type="danger" @click="handleDelchildParameterList(index,i)">删除子规格</el-button>-->
													<el-button plain size="mini" v-if="!tab.specificationId && i > 0" type="danger" @click="handleDelchildParameterList(index)">删除规格</el-button>
													<el-button plain size="mini" v-if="tab.specificationId && i > 0" type="danger" @click="handleDelchildParameterSpecificationId(index,i,tab.specificationId)">删除规格</el-button>
												</div>													
											</el-col>									
										</el-row>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="24">
						<el-form-item label="商品图片">
							<div class="uploadImg">
								<div v-for="(tab,index) in this.urlList" class="uploadImgItem">
									<img :src="tab" style="width: 145px;height: 145px;border-radius: 5px;object-fit: cover;">
									<img class="uploadImgItemDel" @click="handleAddDel(index)" src="http://blyw.oss-cn-hangzhou.aliyuncs.com/webStorage/web_1619754060794173.png"/>
								</div>
								<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return Upload(res)}" :multiple="true" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="image/jpeg,image/png">
									<i class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="视频">
							<div v-if="editForm.videoUrl" class="uploadVideo">
								<video :src="editForm.videoUrl" :poster="editForm.vodPhoto" controls style="width: 360px;height: 180px;"></video>
								<img class="uploadImgItemDel" @click="handleDelUrl(1)" src="http://blyw.oss-cn-hangzhou.aliyuncs.com/webStorage/web_1619754060794173.png"/>
							</div>
							<el-upload v-if="!editForm.videoUrl" action :http-request="UploadVideoE" :on-preview="handlePreview" :before-remove="beforeRemove" :on-remove="handleRemove" :on-success="handleSuccess" :on-exceed="handleExceed" drag :limit="limit" :file-list="fileList">
								<i class="el-icon-upload" ></i>
								<div class="el-upload__text">
												将视频拖到此处，或
									<em>点击上传</em>
								</div>
								<div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
							</el-upload>
							<div v-if="editForm.videoUrl">上传文件大小不能超过 1G</div>
							<el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click.native="editFormVisible = false">取消</el-button>
				<el-button size="mini" type="primary" @click.native="editSubmit" :loading="editLoading">确定</el-button>
			</div>
		</el-dialog>

        <el-dialog :visible.sync="photoFormVisible" :close-on-click-modal="false" style="margin-top: -30px;">
    	  <el-carousel indicator-position="outside" height="600px">
            <el-carousel-item v-for="item in this.photoForm.photo.split(',')" :key="item.index">
                <img :src="item" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"/>
            </el-carousel-item>
          </el-carousel>
	    </el-dialog>
	    
	    <!--规格-->
        <el-dialog :visible.sync="specVisible" :close-on-click-modal="false"  title="商品信息" width="800px">
            <el-table ref="table" :data="specList" size="small" style="width: 100%;" border  stripe highlight-current-row>
	        	<el-table-column  label="图片" width="80" align="center">
		            <template slot-scope="scope">
	    	    	    <el-popover placement="top-start" title="" trigger="click">
	                        <img :src="scope.row.specificationImg" alt="" style="width: 500px;">
	                        <img slot="reference" :src="scope.row.specificationImg" style="width: 40px;height: 40px;object-fit: cover;border-radius: 5px;">
	                    </el-popover>
			        </template>
		        </el-table-column>
		        <el-table-column prop="specificationName" label="名称" min-width="50" align="center">
		        </el-table-column>
		        <el-table-column  prop="price" label="价格" min-width="50" align="center">
		        </el-table-column>
		        <el-table-column prop="number" label="库存" min-width="50" align="center">
		        </el-table-column>
	        </el-table>
        </el-dialog>
		
		<!--拼团信息界面-->
		<el-dialog title="拼团信息" :visible.sync="addGroupFormVisible" :close-on-click-modal="false" width="800px" style="margin-top: -80px;"> 
			<el-form :model="addGroupForm" label-width="120px" ref="addGroupForm">
				<el-row>
					<el-col :span="12">
						<el-form-item label="团购标题" prop="title">
							<el-input v-model="addGroupForm.title" placeholder="请输入团购标题" size="mini" :rules="[{ required: true, message: '请填写团购标题', trigger: 'blur' }]"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="活动时间" prop="dateRange">
							<el-date-picker v-model="addGroupForm.dateRange" size="mini" clearable style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
								range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="可否单独购买" prop="isOneBuy">
							<el-select v-model="addGroupForm.isOneBuy" size="mini" style="width:100%;">
								<el-option :value="0" label="不可单独购买"></el-option>
								<el-option :value="1" label="可单独购买"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="团购状态" prop="state">
							<el-select v-model="addGroupForm.state" size="mini" style="width:100%;">
								<el-option :value="0" label="未开启"></el-option>
								<el-option :value="1" label="已开启"></el-option>
								<el-option :value="2" label="已结束"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="成团人数" prop="userCount">
							<el-input v-model="addGroupForm.userCount" placeholder="请输入成团人数" size="mini" type="number">
								<template slot="append">人</template>
							</el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
						<el-form-item label="商品数量" prop="saleCount">
							<el-input v-model="addGroupForm.saleCount" placeholder="请输入商品数量" size="mini" type="number">
								<template slot="append">份</template>
							</el-input>
						</el-form-item>
					</el-col> -->
				<!-- </el-row>
				<el-row> -->
					<!-- <el-col :span="12">
						<el-form-item label="单独购买价格" prop="normalPrice">
							<el-input v-model="addGroupForm.normalPrice" placeholder="请输入普通单独购买价格" size="mini" type="number">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col> -->

					<el-col :span="12">
						<el-form-item label="拼团价格" prop="groupBuyPrice">
							<el-input v-model="addGroupForm.groupBuyPrice" placeholder="请输入拼团购买的价格" size="mini" type="number">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="立省金额" prop="saveMoney">
							<el-input v-model="addGroupForm.saveMoney" placeholder="请输入立省金额" size="mini" type="number">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排序索引" prop="sort">
							<el-input v-model="addGroupForm.sort" type="number" placeholder="请输入排序索引" size="mini"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">						
						<el-form-item label="活动图片">
							<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return UploadGroup(res)}" 
								:multiple="false" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="*/">
								<img v-if="addGroupForm.activeImgPath" :src="addGroupForm.activeImgPath" style="width:95%;height:95%;border-radius: 5px;padding-top:5px;object-fit: cover;">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click.native="addGroupFormVisible = false">取消</el-button>
				<el-button size="mini" type="primary" @click.native="addGroupSubmit">确定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { client ,getFileNameUUID} from '../../common/js/alioss'
	import util from '../../common/js/util'
		const toolbarOptions = [
		[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
		['bold', 'italic', 'underline', 'strike'],// toggled buttons
		['blockquote', 'code-block'],
		[{ 'list': 'ordered'}, { 'list': 'bullet' }],
		[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
		[{ 'direction': 'rtl' }], // text direction
		[{ 'align': [] }],
		['image']
	]
	export default {
		name: "Upload",
		props: {
			limit: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				filters: {
					content: '',
					isOnSale: '',
				},
				options:[{
					value:true,
					label:'上架'
				},{
					value:false,
					label:'下架'
				}],
				data:{},
				users: [],
				option:[],
				list:[],
				sels: [],
				fileList:[],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				editorOption: {
		        placeholder: '',
		        theme: 'snow',  // or 'bubble'
		        modules: {
		            toolbar: {
		                container: toolbarOptions,  // 工具栏
		                handlers: {
		                    'image': function (value) {
		                        if (value) {
		                        // 触发input框选择图片文件
		                            document.querySelector('.avatar-uploader input').click()
		                        } else {
		                            this.quill.format('image', false);
		                        }
		                    }
		                }
		            }
		        }
		      },
		      optionList:[{
		      	value:true,
		      	label:'是'
		      },{
		      	value:false,
		      	label:'否'
		      }],
		      specificationList:[{
		      	  number:'',
		      	  price:'',
		          specificationImg:'',
		      	  specificationValue:'',
		      }],
		      bothSpecification:{
		      	specificationMainName:'',
		      	specificationChildName:'',
		      	parameterList:[{
		      		specificationValue:'',
		      		specificationImg:'',
		      		price:'',
		      		number:'',
		      		childParameterList:[{
		      			specificationValue:''
		      		}]
		      	}]
		      },
		      specVisible:false,
		      specList:[],
		      data:{},
		      shopList:[],
		      pcategoryList:[],
		      categoryList:[],
		      urlList:[],
		      addLoading:false,
		      addFormVisible:false,
			  addGroupFormVisible:false,
		      addForm:{
		      	brief:'商品简介',
		      	categoryId:'',
		      	counterPrice:'',
		      	detail:'',
		      	gallery:'',
		      	name:'',
		      	isHot:'',
		      	isNew:'',
		      	specificationList:[],
		      	specificationType:2,
		      	videoUrl:'',
		      	isSince:'',
		      	vodPhoto:'',
		      	newCategoryId:'',
			    pNewCategoryId:''
		      },
		      editLoading:false,
		      editFormVisible:false,
		      editForm:{
		      	brief:'商品简介',
		      	categoryId:'',
		      	counterPrice:'',
		      	detail:'',
		      	gallery:'',
		      	name:'',
		      	isHot:'',
		      	isNew:'',
		      	specificationList:[],
		      	specificationType:'',
		      	videoUrl:'',
		      	isSince:'',
		      	vodPhoto:'',
		      	newCategoryId:'',
			    pNewCategoryId:''
		      },
		      photoFormVisible: false,
			  photoForm:{
				  photo:''
			  },
			  addGroupForm: {				
				id: '',
				title: '',
				activeImg:'',
				activeImgPath:'',
				cateId:0,
				cateChildId:0,
				buyType: '',
				linkType: 1,
				isNewUserGroup:0,
				linkId: 0,
				userCount: '',
				saleCount: '',
				normalPrice: '',
				groupBuyPrice: '',
				saveMoney:'',
				beginTime: '',
				endTime: '',
				isOneBuy: 0,
				state: '',
				sort: '',
				dateRange:[],
			  },
			  specVisible:false,
			  specList:[],
			  isdangeOptions:[{
			  	value:1,
			  	label:'单个规格'
			  },{
			  	value:2,
			  	label:'两个规格'
			  }],
			   ileList: [], //文件列
		      showProgress: false, //进度条的显示
		      dataObj: {}, //存签名信息
		      progress: 0, //进度条数据
			
			}
		},
		mounted() {
			this.getUsers();
			this.getData();
		},
		methods: {
			/**
			 *  去编辑拼团
			 */
			handleAddGroup(row){

				console.log('row', row)
				this.addGroupFormVisible = true;
				this.addGroupForm.cateId = row.goodsInfo.categoryIdNew;
				this.addGroupForm.linkId = row.goodsId;

				console.log('addGroupForm', this.addGroupForm)

			},
			//商品评论
			goodsComment(index, row, href) {
				console.log(href, '1')
				this.$router.push({
					path: '/' + href,
					query: {
						id: row.goodsId
					}
				})
			},
			//时间转换开始时间 
			formatDate(row, column) {
                let date = new Date(parseInt(row.goodsInfo.addTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            },
            dialogClose(){
                this.fileList = [];
            },			
			//失去焦点事件
		    onEditorBlur(editor){
		    },
		    //获得焦点事件
		    onEditorFocus({editor,html,text}){
			    let dada = editor.delta.ops
			    let imgValue = dada.filter(item => {
			        if (item.insert.image) {
			            return true
			        }
			    }).map(item => item.insert.image).toString()
			    this.images = imgValue
		    },
		    //编辑器文本发生变化
		    onEditorChange({editor,html,text}){
		//      this.editForm.photo=[]
		    },
		    uploadImage(file) {
		        var fileName = 'webStorage/web_' + file.file.uid+Math.floor(Math.random()*10000) + file.file.name.substr(file.file.name.indexOf("."));
		        let quill = this.$refs.myQuillEditor.quill;
				client().put(fileName, file.file).then(result => {
					let length = quill.getSelection().index;
					quill.insertEmbed(length, 'image', result.url);
					quill.setSelection(length + 1);
					this.listLoading = false;
				}).catch(function (err) {});
		    },
		    //添加图片
		    beforeAvatarUpload(file) {},//图片上传到阿里云
			
			//文件上传前的校验
			beforeAvatarUploadV(file) {
				const isLt100M =
					file.size / 1024 / 1024 > 10 && file.size / 1024 / 1024 < 1024;
				const isLt30 = file.name.length < 30;
				if (["video/mp4"].indexOf(file.type) == -1) {
					this.$message.error("请上传正确的视频格式");
					return false;
				}
				if (!isLt100M) {
					this.$message.error("上传视频大小要在10MB~1GB之间哦!");
					return false;
				}
				if (!isLt30) {
					this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
					return false;
				}
			},
		    // 文件超出个数限制时的钩子
			handleExceed(files, fileList) {
				this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
			},
			// 点击文件列表中已上传的文件时的钩子
			handlePreview(file) {},
			// 删除文件之前的钩子
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
			// 文件列表移除文件时的钩子
			handleRemove(file, fileList) {},
			// 文件上传成功时的钩子
			handleSuccess(response, file, fileList) {
				this.fileList = fileList;
			},
			// http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
			//multipartUpload方法查看官方文档[添加链接描述](https://www.alibabacloud.com/help/zh/doc-detail/31995.htm)
			UploadVideo(file) {
				const that = this;
				async function multipartUpload() {
					let temporary = file.file.name.lastIndexOf(".");
					let fileNameLength = file.file.name.length;
					let fileFormat = file.file.name.substring(
						temporary + 1,
						fileNameLength
					);
					console.log(getFileNameUUID(),'getFileNameUUID()');
					console.log(fileFormat,'fileFormat');
					let fileName = getFileNameUUID() + "." + fileFormat;
					client(that.dataObj)
						.multipartUpload(`beizhi/${fileName}`, file.file, {
							progress: function(p) {
								//p进度条的值
								console.log(p);
								that.showProgress = true;
								that.progress = Math.floor(p * 100);
							}
						})
						.then(result => {
							//上传成功返回值，可针对项目需求写其他逻辑
							console.log(result,'上传成功了')
							var url = result.res.requestUrls[0]
							var index = url.lastIndexOf("?")
							url = url.substring(0, index)
							console.log(url,'新的链接')
							that.addForm.videoUrl = url;
		                    that.addForm.vodPhoto = url + '?x-oss-process=video/snapshot,t_10000,m_fast';
							let audioElement = new Audio(url);
							audioElement.addEventListener("loadedmetadata", () => {
							    that.addForm.duration = Math.floor(audioElement.duration); //时长为秒，小数，182.36
							    console.log(that.addForm.duration,'duration');
							});
						})
						.catch(err => {
							console.log("err:", err);
							console.log("上传失败了", err);
						});
				}
				multipartUpload();

			},
			UploadVideoE(file) {
				const that = this;
				async function multipartUpload() {
					let temporary = file.file.name.lastIndexOf(".");
					let fileNameLength = file.file.name.length;
					let fileFormat = file.file.name.substring(
						temporary + 1,
						fileNameLength
					);
					console.log(getFileNameUUID(),'getFileNameUUID()');
					console.log(fileFormat,'fileFormat');
					let fileName = getFileNameUUID() + "." + fileFormat;
					client(that.dataObj)
						.multipartUpload(`beizhi/${fileName}`, file.file, {
							progress: function(p) {
								//p进度条的值
								console.log(p);
								that.showProgress = true;
								that.progress = Math.floor(p * 100);
							}
						})
						.then(result => {
							//上传成功返回值，可针对项目需求写其他逻辑
							console.log(result,'上传成功了')
							var url = result.res.requestUrls[0]
							var index = url.lastIndexOf("?")
							url = url.substring(0, index)
							console.log(url,'新的链接')
							that.editForm.videoUrl = url;
		                    that.editForm.vodPhoto = url + '?x-oss-process=video/snapshot,t_10000,m_fast';
							let audioElement = new Audio(url);
							audioElement.addEventListener("loadedmetadata", () => {
							    that.editForm.duration = Math.floor(audioElement.duration); //时长为秒，小数，182.36
							    console.log(that.editForm.duration,'duration');
							});
						})
						.catch(err => {
							console.log("err:", err);
							console.log("上传失败了", err);
						});
				}
				multipartUpload();

			},
			//删除视频
			handleDelUrl(index){
				if (index==0) {
					this.addForm.videoUrl = ''
				}else{
					this.editForm.videoUrl = ''
				}
				this.showProgress = false //进度条的显示
		        this.dataObj = {} //存签名信息
		        this.progress = 0 //进度条数据
			},
			//新增商品主图片
			Upload(file) {
				var fileName = 'webStorage/web_' + file.file.uid+Math.floor(Math.random()*10000) + file.file.name.substr(file.file.name.indexOf("."));
				client().put(fileName, file.file).then(result => {
					console.log(result.url.substring(58))
					let dataUrl = result.url
					this.urlList.push(dataUrl)
				}).catch(function (err) {
                    console.log(err);
	 			});
			},
			//删除新增主体图片
			handleAddDel(index){
				this.urlList.splice(index,1)
				console.log(this.urlList,'this.urlList')
			},
		    //显示图片页面
			handlePhoto: function (index, row) {
				this.photoFormVisible = true;
				console.log(row);
				this.photoForm.photo = row.url;
			},
			//新增商品规格
		    handleAddSpec(){
		    	this.specificationList.push({
		    		number:'',
		      	    price:'',
		            specificationImg:'',
		      	    specificationValue:'',
		    	})
		    },
		    //删除商品规格
		    handleDelSpec(index){
		    	this.specificationList.splice(index,1)
		    },
		    //通过接口删除规格
		    handleDelSpecProductId(index,specificationId){
		    	var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/goods/delSpecification', this.qs.stringify({specificationId: specificationId})).then(data => {
					let  res = data.data;
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.specificationList.splice(index,1)
					}
				})
		    },
		    //新增多规格 规格
		    handleAddparameterList(){
		    	this.bothSpecification.parameterList.push({
		      		specificationValue:'',
		      		specificationImg:'',
		      		price:'',
		      		number:'',
		      		childParameterList:[{
		      			specificationValue:'',
		      			number:''
		      		}]
		      	})
		    },
		    //删除多个规格的规格
		    handleDelparameterList(index){
		    	this.bothSpecification.parameterList.splice(index,1)
		    },
		    //新增多个规格的子规格
		    handleAddchildParameterList(index){
		    	this.bothSpecification.parameterList[index].childParameterList.push({
		    		specificationValue:'',
		    		number:''
		    	})
		    },
		    //删除多个规格的子规格
		    handleDelchildParameterList(index,i){
		    	this.bothSpecification.parameterList[index].childParameterList.splice(i,1)
		    },
		    //通过接口删除主规格
		    handleDelParameterSpecificationId(index,specificationId){
		    	var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/goods/delSpecification', this.qs.stringify({specificationId: specificationId})).then(data => {
					let  res = data.data;
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.bothSpecification.parameterList.splice(index,1)
					}
				})
		    },
		    //通过接口删除子规格
		    handleDelchildParameterSpecificationId(index,i,specificationId){
		    	var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/goods/delSpecification', this.qs.stringify({specificationId: specificationId})).then(data => {
					let  res = data.data;
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.bothSpecification.parameterList[index].childParameterList.splice(i,1)
					}
				})
		    },
		    //上传规则图片
		    UploadSpec(file, index) {
		    	var fileName = 'webStorage/web_' + file.file.uid+Math.floor(Math.random()*10000) + file.file.name.substr(file.file.name.indexOf("."));
				client().put(fileName, file.file).then(result => {
					this.specificationList[index].specificationImg = result.url
				}).catch(function (err) {
                    console.log(err);
	 			});
		    },		    
		    //上传规则图片
		    UploadSpec1(file, index) {
		    	var fileName = 'webStorage/web_' + file.file.uid+Math.floor(Math.random()*10000) + file.file.name.substr(file.file.name.indexOf("."));
				client().put(fileName, file.file).then(result => {
					this.bothSpecification.parameterList[index].specificationImg = result.url
				}).catch(function (err) {
                    console.log(err);
	 			});
		    },
			//上传拼团活动图片
		    UploadGroup(file) {
		    	var fileName = 'webStorage/web_' + file.file.uid + Math.floor(Math.random()*10000) + file.file.name.substr(file.file.name.indexOf("."));
				client().put(fileName, file.file).then(result => {
					console.log('UploadGroup', result);
					this.addGroupForm.activeImg = result.name;
					this.addGroupForm.activeImgPath = result.url;

				}).catch(function (err) {
                    console.log(err);
	 			});
		    },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取商品列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
					page: this.page,
					size: this.pageSize,
					content: this.filters.content,
					isOnSale: this.filters.isOnSale,
					
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/goods/getGoodsList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.total = res.total;
						this.users = res.rows;
						this.listLoading = false;
					}
				});
			},
			//获取商品分类
			getData:function (){
				//获取商家端子机的商品分类分类
				let para ={
					
				}
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/platform/manage/getNewCategorySelect', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.pcategoryList = res.data;
					}
				});
			},
			//选择一级分类 赋值二级分类
			handlecategory(index){
				this.categoryList = this.pcategoryList[index].child
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.urlList = []
				this.addForm = {
			      	brief:'商品简介',
			      	categoryId:100101440,
			      	counterPrice:'',
			      	detail:'',
			      	gallery:'',
			      	name:'',
			      	isHot:'',
			      	isNew:'',
			      	specificationList:[],
			      	specificationType:2,
			      	videoUrl:'',
			      	isSince:'',
			      	newCategoryId:'',
			      	pNewCategoryId:''
				};
				this.specificationList = [{
					number:'',
		      	    price:'',
		            specificationImg:'',
		      	    specificationValue:'',
				}]
				this.bothSpecification = {
			      	specificationMainName:'',
			      	specificationChildName:'',
			      	parameterList:[{
			      		specificationValue:'',
			      		specificationImg:'',
			      		price:'',
			      		number:'',
			      		childParameterList:[{
			      			specificationValue:'',
			      			number:''
			      		}]
			      	}]
			    }
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确定新增吗?', '提示', {}).then(() => {
							this.addLoading = true;
							if(Array.isArray(this.addForm.photo)&&this.addForm.photo.length>0){
                                this.addForm.photo = this.addForm.photo.join(",");
							}
							let para = {
								
							}
							para.body = JSON.stringify({
							    name:this.addForm.name,
					            gallery:this.urlList,
				            	brief:this.addForm.brief,
				            	categoryId:this.addForm.categoryId,
				            	counterPrice:this.addForm.counterPrice,
				            	isHot:this.addForm.isHot,
				            	isNew:this.addForm.isNew,
				            	detail:this.addForm.detail,
				            	specificationList:this.specificationList,
				            	bothSpecification:this.bothSpecification,
				            	specificationType:this.addForm.specificationType,
				            	videoUrl:this.addForm.videoUrl,
				            	isSince:this.addForm.isSince,
				            	categoryIdNew:this.addForm.newCategoryId,
							})
                            console.log(para,'para')
                            var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
							});  
							instance.post('admin/goods/addGoods', this.qs.stringify(para)).then(data => {
								let  res = data.data;
								if (res.code !== 0) {
									this.$message({
										message: res.msg,
										type: 'error'
									});
								} else {
									this.addLoading = false;
									this.$message({
										message:'成功',
										type: 'success'
									});
									this.$refs['addForm'].resetFields();
									this.addFormVisible = false;
									this.getUsers();
								}
							});
						});
					}
				});
			},
			addGroupSubmit(e){
				this.$refs.addGroupForm.validate((valid) => {
					if (valid) {
						this.$confirm('确定设置拼团吗?', '提示', {}).then(() => {
							this.addLoading = true;
							// if(Array.isArray(this.addGroupForm.photo)&&this.addGroupForm.photo.length>0){
                            //     this.addGroupForm.photo = this.addGroupForm.photo.join(",");
							// }
							
							console.log('this.addGroupForm.dateRange', this.addGroupForm.dateRange)
							if(this.addGroupForm.dateRange.length === 2){
								this.addGroupForm.beginTime = this.addGroupForm.dateRange[0] + ' 00:00:00';
								this.addGroupForm.endTime = this.addGroupForm.dateRange[1]+ ' 23:59:59';
							}else{
								this.$message({
										message:'请选择开团活动时间',
										type: 'error'
									});
								return;
							}


                            console.log(this.addGroupForm,'this.addGroupForm')
                            var instance = this.$http.create({
								headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},});  
							instance.post('admin/group/add', this.qs.stringify(this.addGroupForm)).then(data => {
								let  res = data.data;
								if (res.code !== 0) {
									this.$message({
										message: res.msg,
										type: 'error'
									});
								} else {
									this.addLoading = false;
									this.$message({
										message:'成功',
										type: 'success'
									});
									this.$refs['addGroupForm'].resetFields();
									this.addGroupFormVisible = false;
									this.getUsers();
									this.$router.push("/group");

								}
							});
						});
					}
				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true
				this.urlList = []
				this.editForm.goodsId = row.goodsId
				
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/goods/detail', this.qs.stringify({goodsId:row.goodsId})).then(data => {
					let  res = data.data
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						console.log(res)
						console.log(this.pcategoryList)
						this.pcategoryList.forEach(v=>{
							if (v.categoryId==res.data.pNewCategoryId) {
								this.categoryList = v.child
							}
						})
						this.editForm.newCategoryId = res.data.newCategoryId
						this.editForm.pNewCategoryId = res.data.pNewCategoryId
						
						this.editForm.name = res.data.goodsInfo.name
						this.editForm.brief = res.data.goodsInfo.brief
						this.editForm.categoryId = res.data.goodsInfo.categoryId
						this.editForm.counterPrice = res.data.goodsInfo.counterPrice
						this.editForm.isHot = res.data.goodsInfo.isHot
						this.editForm.isNew = res.data.goodsInfo.isNew
						this.editForm.detail = res.data.goodsInfo.detail
						this.editForm.videoUrl = res.data.goodsInfo.videoUrl
						this.editForm.isSince = res.data.goodsInfo.isSince
						if(res.data.goodsInfo.gallery.length > 0){
							this.urlList = res.data.goodsInfo.gallery
						}
						this.editForm.specificationType = res.data.goodsInfo.specificationType
						if(res.data.goodsInfo.specificationType == 1){
							this.specificationList = res.data.productList[0].valueList
						}else{
							this.bothSpecification = res.data.bothProductList
						}
						
					}
				});
				
				
				
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确定修改吗?', '提示', {}).then(() => {
							this.editLoading = true;
							if(Array.isArray(this.editForm.photo)&&this.editForm.photo.length>0){
                                 this.editForm.photo = this.editForm.photo.join(",");
							}
							let para = {
								
							}
							para.body = JSON.stringify({
							    id:this.editForm.goodsId,
				            	name:this.editForm.name,
					            gallery:this.urlList,
				            	brief:this.editForm.brief,
				            	categoryId:this.editForm.categoryId,
				            	counterPrice:this.editForm.counterPrice,
				            	isHot:this.editForm.isHot,
				            	isNew:this.editForm.isNew,
				            	detail:this.editForm.detail,
				            	specificationList:this.specificationList,
				            	bothSpecification:this.bothSpecification,
				            	specificationType:this.editForm.specificationType,
				            	videoUrl:this.editForm.videoUrl,
				            	isSince:this.editForm.isSince,
				            	categoryIdNew:this.editForm.newCategoryId,
							})
							var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
							});  
							instance.post('admin/goods/updGoods', this.qs.stringify(para)).then(data => {
								
								let  res = data.data;
								if (res.code !== 0) {
									this.$message({
										message: res.msg,
										type: 'error'
									});
								} else {
									this.editLoading = false;
									this.$message({
										message: '成功',
										type: 'success'
									});
									this.$refs['editForm'].resetFields();
									this.editFormVisible = false;
									this.getUsers();
								}
							});
						});
					}
				});
			},
			
			
			
			selsChange: function (sels) {
				this.sels = sels;
			},
			//删除
			handleDel(id) {
				this.$confirm('确定删除吗?', '提示', {}).then(() => {
					this.listLoading = true;
					var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
					});  
					instance.post('admin/goods/delGoods', this.qs.stringify({goodsId: id})).then(data => {
						
						let  res = data.data;
						if (res.code !== 0) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getUsers();
						}
					})
				}).catch(() => {

				});
			},
			//显示图片页面
			handlePhoto: function (index, row) {
				this.photoFormVisible = true;
				console.log(row);
				this.photoForm.photo = row.url;
			},
			
			//下架
			handleDisabled(goodsId){
				this.$confirm('确定下架吗?', '提示', {}).then(() => {
					this.listLoading = true;
					var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				    });  
				    instance.post('admin/goods/updateOnSale', this.qs.stringify({goodsId:goodsId,isOnSale:false})).then(data => {
						
						let  res = data.data;
						if (res.code !== 0) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getUsers();
						}
					})
				}).catch(() => {

				});
			},
			//启用
			handleToEnable(goodsId){
				this.$confirm('确定上架吗?', '提示', {}).then(() => {
					this.listLoading = true;
					var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				    });  
				    instance.post('admin/goods/updateOnSale', this.qs.stringify({goodsId:goodsId,isOnSale:true})).then(data => {
						
						let  res = data.data;
						if (res.code !== 0) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getUsers();
						}
					})
				}).catch(() => {

				});
			},
			//查看规格
			handlespec(row){
				this.specList = row.productList[0].valueList
				this.specVisible = true
			},
		},
	}

</script>
<style>
	.advice{
		margin-left: 80px;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.advice1{
		margin-left: 100px;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.uploadImg{
  	    display: flex;
  	    flex-direction: row;
  	    flex-wrap: wrap;
    }
    .uploadImgItem{
  	    display: flex;
  	    flex-direction: row;
  	    flex-wrap: wrap;
  	    margin-right: 10px;
  	    margin-bottom: 10px;
     	width: 145px;
  	    height: 145px;
  	    position: relative;
    }
    .uploadImgItemDel{
  	    position: absolute;
  	    top: -5px;
  	    right: -5px;
  	    width: 30px;
  	    height: 30px;
    }
  
    .plantingGoodsFarm{
		margin-top: 24px;
		padding: 10px;
		background: #FBFBFB;
		border-radius: 10px;
	}
	.plantingGoodsFarmHead{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 20px;
		margin-bottom: 10px;
	}
	.plantingGoodsFarmHeadSpan{
		color: #000000;
		font-weight: 600;
	}
	.plantingGoodsFarmHeadDiv{
		color: #00C751;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.plantingGoodsFarmHeadDiv span{
		margin-right: 10px;
	}
	.plantingGoodsFarmMainRight{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 20px;
		color: #FF4457;
	}
	.plantingGoodsFarmMainRight span{
		margin-right: 10px;
	}
	.plantingGoodsFarmMain{
		padding-bottom: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.plantingGoodsFarmMain-content{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		
	}
	.plantingGoodsFarmMain1{
		background: #F4F4F4;
		padding: 10px;
		margin-bottom: 10px;
	}
	.zhuguige{
    	display: flex;
    	flex-direction: row;
    	align-content: center;
    	justify-content: space-between;
    }
    .security{
    	display: flex;
		flex-direction: row;
		align-items: center;
    }
    
    .security-item{
    	margin-right: 10px;
    }
    
</style>



 
<style >
/* .el-icon-upload:before {
    content: '\e7c3'  
}
.el-icon-upload {
    font-size: 30px;      //图标的尺寸大小
    margin: 4px 0 2px;   //图标与四周元素的间距
} */
/* //下面这几行代码就是设置上传框的长宽，可以按百分比来设置也可以用px去设置 */
	.el-upload--picture-card {
    width: 100px;
    height: 100px;line-height: 110px;
}
</style>